import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Popover } from 'antd';
import { WeaLocaleProvider, WeaTools, WeaIntro } from 'ecCom';

import { WeaPlugin, WeaLicense, WeaVersion, WeaSystemSetting } from 'weaPortalPublic';

const { Step } = WeaIntro;

const getLabel = WeaLocaleProvider.getLabel;

@inject('portalIntroStore')
@inject('portalThemeStore')
@observer
class IntroStep4 extends React.Component {
  constructor(props) {
    super(props);
    this.onVisibleChange = this.onVisibleChange.bind(this);
    this.onMenuClick = this.onMenuClick.bind(this);
  }

  render() {
    const { portalIntroStore, portalThemeStore } = this.props;
    const { intro_step } = portalIntroStore;
    const { toolbarMoreMenu = [], toolbarMoreMenuVisible, translatepage } = portalThemeStore;
    const _toolbarMoreMenu = toJS(toolbarMoreMenu);

    if (_toolbarMoreMenu.length == 0) {
      return null;
    }

    return (
      <Popover
        ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@vt08uu`}
        trigger="click"
        placement="bottomLeft"
        content={
          <Step ecId={`${(this && this.props && this.props.ecId) || ''}_Step@csceyb`} id="portal-intro4">
            <div className="e9header-toolbar-more-content">
              {_toolbarMoreMenu.map((item, index) => {
                const { name, icon, type } = item;

                return (
                  <div key={index} className="e9header-toolbar-more-item" title={name} onClick={() => this.onMenuClick(item)}>
                    <i className={icon} style={type == 'cus' ? { margin: '-7px 0 0 2px', fontSize: '14px' } : {}} />
                    <span>{name} </span>
                  </div>
                );
              })}
            </div>
          </Step>
        }
        overlayClassName={translatepage == '1' ? 'e9header-toolbar-more-overlay-tran' : 'e9header-toolbar-more-overlay'}
        visible={toolbarMoreMenuVisible}
        onVisibleChange={this.onVisibleChange}
        afterPopupVisibleChange={(v) => intro_step.intro4 && v && setTimeout(() => window.portal_intro.goToStep(4), 150)}
      >
        <div className="e9header-toolbar-more-icon" title={getLabel(17499, '更多')}>
          <WeaPlugin ecId={`${(this && this.props && this.props.ecId) || ''}_WeaPlugin@q2xv86`} ref="WeaPlugin" />
          <WeaLicense ecId={`${(this && this.props && this.props.ecId) || ''}_WeaLicense@yejte8`} ref="WeaLicense" />
          <WeaVersion ecId={`${(this && this.props && this.props.ecId) || ''}_WeaVersion@30l554`} ref="WeaVersion" />
          <WeaSystemSetting ecId={`${(this && this.props && this.props.ecId) || ''}_WeaSystemSetting@cwybvm`} ref="WeaSystemSetting" />
          <i className="wevicon-toolbar-more" />
        </div>
      </Popover>
    );
  }

  onVisibleChange(visible) {
    const { portalIntroStore, portalThemeStore } = this.props;
    const { intro_step } = portalIntroStore;
    !intro_step.intro4 && portalThemeStore.onToolbarMoreMenuVisibleChange(visible);

    const themeLayoutMask = document.getElementById('themeLayoutMask');
    if (visible) {
      themeLayoutMask.style.display = 'block';
    } else {
      themeLayoutMask.style.display = 'none';
    }
  }

  onMenuClick(item) {
    this.onVisibleChange(false);

    let { id, url, mobxrouteurl, linkmode, width = 700, height = 500 } = item;

    if (linkmode == '1') {
      if (id == '3' || id == '5' || id == '6' || id == '8') {
        const ref = { '3': 'WeaPlugin', '5': 'WeaLicense', '6': 'WeaVersion', '8': 'WeaSystemSetting' }[id];
        this.refs[ref].onShow();
      } else {
        const dialog = WeaTools.createDialog({
          title: name,
          url,
          icon: 'icon-coms-content',
          iconBgcolor: '#1a57a0',
          style: { width, height },
          parentClassName: 'e9header-toolbar-dialog',
        });
        dialog.show();
      }
    } else {
      const { portalThemeStore } = this.props;
      portalThemeStore.onLoadMain({ url, mobxrouteurl, target: linkmode == '0' ? '_blank' : 'mainFrame' });
    }
  }
}

export default IntroStep4;
